<template>
  <div class="tablePageWarp">
    <div class="commonTableSty">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :pagination="false"
        :scrollX="900"
        :rowKey="(record, index) => index"
        size="default" >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text || '-'" :key="column.key"></table-ellipsis>
        </template>
        <!-- 暂不开发先屏蔽 -->
        <!-- <template slot="operation" slot-scope="text, record">
          <a-button
            type="primary"
            :ghost="true"
            size="small"
            @click="showUpgradeLogs"
          >{{ $t('升级日志') }}</a-button>
        </template> -->
      </s-table>
    </div>
    <custom-modal
      :width="1100"
      :visible="upgradeLogsVisibal"
      title="升级日志"
      :destroyOnClose="true"
      class="largeVersionPopup"
      @cancel="shutUpgradeLogs"
      modalCls=".largeVersionPopup"
      :isOkBtn="false"
      :bodyStyle="{ height: '500px', overflowY: 'auto' }"
    >
      <upgrade-logs-pop-ups></upgrade-logs-pop-ups>
    </custom-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import { ecuUpgradeHistoryColumns } from '@/views/vehicle/config/list'
import CustomModal from '@/components/CustomModal/index.vue'
import UpgradeLogsPopUps from '@/views/vehicle/components/UpgradeLogsPopUps.vue'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
export default {
  components: {
    STable,
    AuthButton,
    CustomModal,
    UpgradeLogsPopUps,
    TableEllipsis
  },
  props: {
    ecuId: {
      type: String,
      default: ''
    },
    vin: {
      type: String,
      default: ''
    }
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  created () {
  },
  data () {
    return {
      moment,
      columns: ecuUpgradeHistoryColumns,
      upgradeLogsVisibal: false
    }
  },
  methods: {
    // 打开升级日志弹窗
    showUpgradeLogs () {
      this.upgradeLogsVisibal = true
    },
    shutUpgradeLogs () {
      this.upgradeLogsVisibal = false
    },
    // 刷新
    refreshData (isToFirstPage = false) {
      const vm = this
      vm.$nextTick(() => {
        this.$refs.table.refresh(isToFirstPage)
      })
    },
    loadData (parameter) {
      const vm = this
      this.tableData = []
      const apiPromise = vm.$api.getCarEcuUpgradeHistory({ ...parameter, vin: this.vin, ecuId: this.ecuId })
      return new Promise((resolve, reject) => {
        return apiPromise.then(res => {
          if (res.data) {
            this.tableData = res.data
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
.largeVersionPopup {}
</style>
